<template>
  <div>
    <el-tabs v-if="flag" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="客户导向模式" name="first">
        <cmsOrientedMode ref="cmsOrientedMode" :export-domain="exportDomain" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane lazy label="商品导向模式" name="second">
        <shopOrientedMode ref="shopOrientedMode" :export-domain="exportDomain" :goods-tree-data="goodsTreeData" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane lazy label="审批模式" name="third">
        <auditMode ref="auditMode" :export-domain="exportDomain" :goods-tree-data="goodsTreeData" :org-tree-data="orgTreeData" />
      </el-tab-pane>
      <el-tab-pane lazy label="特价关键字" name="fourth">
        <key ref="key" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { goodsTypeQueryList, queryExportDomain } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  export default {
    name: 'specialOrientedMode',
    components: {
      cmsOrientedMode: require('./components/cmsOrientedMode').default,
      key: require('./components/key').default,
      shopOrientedMode: require('./components/shopOrientedMode').default,
      auditMode: require('./components/auditMode').default
    },
    data() {
      return {
        activeName: 'first',
        flag: false,
        goodsTreeData: [],
        orgTreeData: [],
        exportDomain: null
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getGoodsTreeData()
      await this.getOrgTreeData()
      this.getExportDomain()
      this.flag = true
    },
    methods: {
      handleClick() {

      },
      // 获取所属机构数据
      async getOrgTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.orgTreeData = getTreeData(data)
      },
      // 获取商品分类树
      async getGoodsTreeData() {
        const res = await goodsTypeQueryList({})
        // console.log(res)
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.goodsTreeData = getTreeData(data)
      },
      // 获取导出域名
      async getExportDomain() {
        mergeAsyncFunc(queryExportDomain)
          .then((res) => {
            this.exportDomain = res.data
            return res.data
          })
      }
    }
  }
</script>

<style scoped>

</style>
